<template>
  <!-- <p>这是当前健康状态页面</p> -->

  <div>
    <el-result>
      <template slot="icon">
        <div class="circular" :style="{ border: border }">
          <div class="info" :style="{ 'box-shadow': boxShadow }">
            <div class="text">
              <el-row class="textAlign">
                <el-col :span="24">
                  <span class="score" :style="{ color: scoreStyle }"
                    >{{ state }}
                  </span>
                </el-col>
                <el-col :span="24"
                  ><span class="textTip">当前健康状态</span></el-col
                >
              </el-row>
            </div>
          </div>
        </div>
      </template>
      <template slot="extra">    
        <el-button type="primary" size="medium" @click="goToAddReport"
          >填报健康信息</el-button
        >
      </template>
    </el-result>
  </div>
</template>

<script>
import { getHealthState } from "@/api/report";
export default {
  data() {
    return {
      state: "",
      address: "",
      healthState: {},
      level: 0,
      // 安全评分border样式
      border: "",
      scoreStyle: "",
      boxShadow: "",
    };
  },
  created() {
    this.getState();
  },
  methods: {
    getState() {
      getHealthState()
        .then((res) => {
          console.log(res);
          this.healthState = res;
          if (this.healthState.healthstate == 0) {
            this.state = "低风险";
          } else if (this.healthState.healthstate == 1) {
            this.state = "中风险";
          } else if (this.healthState.healthstate == 2) {
            this.state = "高风险";
          } else {
            this.state = "未知";
          }
          this.getColor();
        })
        .catch((error) => console.log(error));
    },
    getColor() {
      if (this.state == "低风险") {
        this.border = "8px solid #99cc66";
        this.scoreStyle = "#99cc66";
        this.boxShadow = "0px 0px 9px 0px rgba(78, 215, 21, 0.53)";
      } else if (this.state == "中风险") {
        this.border = "8px solid #e7ca1e";
        this.scoreStyle = "#e7ca1e";
        this.boxShadow = "0px 0px 9px 0px rgba(78, 215, 21, 0.53)";
      } else {
        this.border = "8px solid #d7152a";
        this.scoreStyle = "#d7152a";
        this.boxShadow = "0px 0px 9px 0px rgba(215, 21, 42, 0.53)";
      }
    },
    goToAddReport() {
      this.$router.push("/report/AddHealthState");
    },
  },
};
</script>

<style lang="scss" scoped>
$color_d7152a: #d7152a;
$color_99CC66: #99cc66;
$color_e7ca1e: #e7ca1e;
$text_align_center: center;
.circular {
  width: 136px;
  height: 136px;
  overflow: hidden;
  border: 8px solid $color_d7152a;
  border-radius: 100%;
  .info {
    width: 115px;
    height: 115px;
    margin: 10px;
    background: #ffffff;
    border-radius: 100%;
    box-shadow: 0px 0px 9px 0px rgba(215, 21, 42, 0.13);

    .text {
      /*flex 布局*/
      display: flex;
      /*实现垂直居中*/
      align-items: $text_align_center;
      /*实现水平居中*/
      justify-content: $text_align_center;
      height: 100px;
      .textAlign {
        text-align: $text_align_center;
        .textTip {
          color: rgba(0, 0, 0, 0.45);
          line-height: 30px;
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
        }
      }
      .score {
        font-size: 22px;
        // color: $color_d7152a;
        font-weight: 500;
        .scoreTip {
          font-size: 14px;
          margin-left: 2px;
        }
      }
    }
  }
}
</style>

